<!-- container box 嵌套 box -->
<template>
  <div class="nesting-component">
    <div class="nesting-main">
      <div class="fliter-opt-u">
        <div style="font-size:12px;">展示组件类型:</div>
        <el-form>
          <el-form-item label="" :label-width="'0px'" style="margin-bottom: 0px;">
            <el-select size="mini" v-model="componentCateType" placeholder="请选择" :popper-append-to-body="false" style="width:100%">
              <el-option label="全部" :value="0">
              </el-option>
              <el-option v-for="cateType in componentCateTypes" :key="cateType.cate" :label="cateType.name"
                :value="cateType.cate">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="component-list">
        <el-scrollbar style="height:100%;">
          <div class="icon-compontent-list">
            <ul class="clearfix">
              <li v-for="comp in componentTypesFilter(componentCateType)" :key="comp.id"
                :class="{selected: componentType === comp.id}" @click="chooseComponentType(comp.id, comp.type, comp.name)">
                <div class="item">
                  <div class="icon"><i :class="['icon-compontent', 'icon-compontent' + comp.id]"></i></div>
                  <div class="name">{{comp.name}}</div>
                </div>
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import * as functions from '@/core/functions.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
import { mapState } from 'vuex'
export default {
  props: {
    componentTypes: {
      type: Array
    }
  },
  computed: {
    ...mapState([
      'design'
    ]),
    componentTypesFilter () {
      let _this = this
      return function (_componentCateType) {
        return _this.componentTypes.filter(item => _componentCateType === 0 || _componentCateType === item.cateType)
      }
    }
  },
  data () {
    return {
      formLabelWidth: '120px',
      componentType: 0,
      componentTypeName: '',
      componentName: '',
      // 展示组件分类
      componentCateType: 0,
      // 展示组件分类种类
      componentCateTypes: [
        { cate: 1, name: '基础组件' },
        { cate: 2, name: '系统组件' },
        { cate: 3, name: '高级组件' },
        { cate: 4, name: '专业组件' }
      ]
    }
  },
  mounted () {
    PubSub.subscribe(PubsubType.PUBSUB_IFRAME_LOADING_OVER, (event, data) => {
      this.componentCateType = 0
    })
  },
  methods: {
    chooseComponentType (comId, comType, comName) {
      if (comId === this.componentType) {
        return
      }
      this.componentType = comId
      this.componentTypeName = comType
      this.componentName = comName
      this.addComponent()
    },
    // 添加拖拉 component 到指定位置
    addComponent () {
      let componentType = this.componentType
      if (componentType === -1) {
        return
      }
      if (componentType < 1) {
        this.$message.error('请选择展示组件！')
        return
      }
      if (componentType === 28) {
        functions.hostSetup().then(setup => {
          if (setup && setup.video && setup.video === 1) {
            let dragConf = BackendjsFunctions.dragDefaultConf()
            dragConf.dragDivInnerCss = {
              'min-width': '150px',
              'height': '40px',
              'background': '#258ffb',
              'border-radius': '8px',
              'cursor': 'move',
              'display': 'flex',
              'justify-content': 'center',
              'align-items': 'center',
              'font-weight': 'bolder',
              'opacity': '0.6',
              'color': '#ffffff',
              'padding': '0 10px',
              'white-space': 'nowrap'
            }
            dragConf.dragDivInnerHtml = '<span>' + this.componentName + '</span>'
            BackendjsFunctions.dragComponentRun(this.componentType, dragConf)
            this.componentType = 0
          } else {
            this.$message.error('请购买本地视频增值服务！')
          }
        })
      } else {
        let dragConf = BackendjsFunctions.dragDefaultConf()
        dragConf.dragDivInnerCss = {
          'min-width': '150px',
          'height': '40px',
          'background': '#258ffb',
          'border-radius': '8px',
          'cursor': 'move',
          'display': 'flex',
          'justify-content': 'center',
          'align-items': 'center',
          'font-weight': 'bolder',
          'opacity': '0.6',
          'color': '#ffffff',
          'padding': '0 10px',
          'white-space': 'nowrap'
        }
        dragConf.dragDivInnerHtml = '<span>' + this.componentName + '</span>'
        BackendjsFunctions.dragComponentRun(this.componentType, dragConf)
        this.componentType = 0
      }
    }
  }
}
</script>

<style scoped lang="scss">
.nesting-component{
  padding: 5px 10px;
}
.fliter-opt-u {
  margin-bottom: 10px;
}
.nesting-component .component-list {
  height: calc(100vh - 180px);
  margin-right: -10px;
}
.nesting-component /deep/ .component-list .el-scrollbar__wrap {
  overflow-x: hidden;
}
.icon-compontent-list {
  overflow: hidden;
  font-size: 12px;
  padding-right: 10px;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    margin: 0 -5px;
    li {
      padding: 0;
      margin: 0;
      list-style: none;
      float: left;
      margin-bottom: 10px;
      width: 50%;
      text-align: center;
      .item {
        margin: 0 5px;
        cursor: pointer;
        border: 1px solid #e9e9e9;
        padding-bottom: 5px;
        &:hover {
          color: #258ffb;
          border-color:#258ffb;
        }
        .icon {
          margin-bottom: 3px;
        }
        .name {
          line-height: 1.5;
        }
      }
      &.selected .item {
        color: #258ffb;
        border-color:#258ffb;
      }
      .icon-compontent {
        width: 60px;
        height: 40px;
        display: inline-block;
        background: url(~@/assets/images/icon_compontents.png) no-repeat;
      }
      .icon-compontent1 {
        background-position: 0 0;
      }
      .icon-compontent2 {
        background-position: -60px 0;
      }
      .icon-compontent3 {
        background-position: -120px 0;
      }
      .icon-compontent4 {
        background-position: -180px 0;
      }
      .icon-compontent5 {
        background-position: -240px 0;
      }
      .icon-compontent6 {
        background-position: 0 -40px;
      }
      .icon-compontent7 {
        background-position: -60px -40px;
      }
      .icon-compontent8 {
        background-position: -120px -40px;
      }
      .icon-compontent9 {
        background-position: -180px -40px;
      }
      .icon-compontent10 {
        background-position: -240px -40px;
      }
      .icon-compontent11 {
        background-position: 0 -80px;
      }
      .icon-compontent12 {
        background-position: -60px -80px;
      }
      .icon-compontent13 {
        background-position: -120px -80px;
      }
      .icon-compontent14 {
        background-position: -180px -80px;
      }
      .icon-compontent15 {
        background-position: -240px -80px;
      }
      .icon-compontent16 {
        background-position: 0 -120px;
      }
      .icon-compontent17 {
        background-position: -60px -120px;
      }
      .icon-compontent18 {
        background-position: -120px -120px;
      }
      .icon-compontent26 {
        background-position: -180px -120px;
      }
      .icon-compontent-1 {
        background-position: -240px -120px;
      }
      .icon-compontent20 {
        background-position: 0 -160px;
      }
      .icon-compontent21 {
        background-position: -60px -160px;
      }
      .icon-compontent22 {
        background-position: -120px -160px;
      }
      .icon-compontent23 {
        background-position: -180px -160px;
      }
      .icon-compontent24 {
        background-position: -240px -160px;
      }
      .icon-compontent27 {
        background-position: -60px -200px;
      }
      .icon-compontent28 {
        background-position: -120px -200px;
      }
      .icon-compontent29 {
        background-position: -180px -200px;
      }
      .icon-compontent30 {
        background-position: -240px -200px;
      }
      .icon-compontent31 {
        background-position: 0 -240px;
      }
      .icon-compontent32 {
        background-position: -60px -240px;
      }
      .icon-compontent33 {
        background-position: -120px -240px;
      }
      .icon-compontent34 {
        background-position: -180px -240px;
      }
      .icon-compontent35 {
        background-position: -240px -240px;
      }
    }
  }
}
.icon-compontent-list li .item:hover .icon-compontent,
.icon-compontent-list li.selected .icon-compontent {
  background-image: url(~@/assets/images/icon_compontents_hover.png);
}
</style>
